<template>
  <div class="text-area-wrapper">
    <textarea name="abstract"
    :value="value"
    @input="handleInput($event)"
    :maxlength="maxlength"
    cols="30" rows="5"></textarea>

    <h3 class="length-sign" :style="signStyle">{{value.length}}/{{maxlength}}</h3>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: () => ''
      },
      maxlength: {
        type: Number,
        default: () => 100
      }
    },
    emits: ['update:value'],
    computed: {
      signStyle() {
        if(this.value.length > this.maxlength) {
          return {
            'color': 'red'
          }
        } else return {};
      }
    },
    methods: {
      handleInput(event) {
        this.$emit('update:value', event.target.value)
      }
    },
  }
</script>

<style lang="less" scoped>
@w: var(--textAreaWidth);
@h: var(--textAreaHeight);
@lh: calc(@w * 0.03);

.text-area-wrapper {
  position: relative;
  box-sizing: border-box;
  width: @w;
  height: @h;
  padding: calc(@h * 0.1) calc(@w * 0.03);
  border: 1px solid var(--gray);
  border-radius: calc(@w * 0.01);
  transition: .15s;

  &:focus-within {
    border-color: var(--lightBlue);
    box-shadow: 0 0 calc(@lh * 0.4) calc(@w * 0.005) var(--slightBlue);
  }

  textarea {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: calc(@lh * 0.7);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    resize: none;
  }

  .length-sign {
    position: absolute;
    bottom: 5%;
    right: 3%;
    color: var(--gray);
    font-weight: normal;
    font-size: calc(@lh);
  }
}
</style>